<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Editable WYSIWYG</title>
    <script src="jquery/jquery-3.6.0.min.js"></script>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.min.css"
          rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="./css/self.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./bootstrap-4.6.1-dist/css/bootstrap.min.css" type="text/css">
    <script src="js/http_code.jquery.com_jquery-3.1.1.js"></script>
    <link type="text/css" rel="stylesheet" href="js/bootstrap-3.3.5-dist/dist/css/bootstrap.css">
    <link href="js/font-awesome-4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/bootstrap-3.3.5-dist/dist/js/bootstrap.js"></script>

    <style>
        .contents{
            margin-top: 100px;
        }
        .editor {
            margin-left: 10%;
            width: 80%;
            height: 200px;
            resize:vertical;
            overflow:auto;
            border:1px solid silver;
            border-radius:5px;
            min-height:100px;
            box-shadow: inset 0 0 10px silver;
            padding:1em;
        }
        .sub_btn{
            display: inline;
            margin-left: 80%;
            width: 100px;
            height:50px;
        }
        .info_input{
            margin-left: 10%;
            width: 80%;
            height: 40px;
            border:1px solid silver;
            border-radius:5px;
            padding:1em;
            box-shadow: inset 0 0 10px silver;
        }
        #welcome{
            margin-top: 8px;
            margin-right: 10px;
            display: none;
            color: rgb(0, 0, 0);
            font-size: 14px;
        }

    </style>
    <script>



    </script>
    <script>

        function validateLogin() {

            var username = getCookie("username");
            var password = getCookie("password");
            console.log("cookie: username:" + username);
            console.log("cookie:password:" + password);

            if (username == null || username == undefined || username == "") {
                username = getUrlParam("username");
                if (username == null || username == undefined || username == "") {
                } else {
                    document.getElementById("registGo").style.display = "none";
                    document.getElementById("loginGo").style.display = "none";
                    $("#welcome").text(" ：" + username);
                    document.getElementById("welcome").style.display = "inline-block";
                }
            } else {
                console.log("进入请求");
                var xmlHttpIsLogin = new XMLHttpRequest();
                xmlHttpIsLogin.open("GET", "http://localhost:8080/userlogin?username=" + username + "&" + "password=" + password, false);
                xmlHttpIsLogin.send();
                if (xmlHttpIsLogin.readyState == 4 && xmlHttpIsLogin.status == 200) {
                    if (xmlHttpIsLogin.responseText == "1") {
                        document.getElementById("registGo").style.display = "none";
                        document.getElementById("loginGo").style.display = "none";
                        $("#welcome").text(" ：" + username);
                        document.getElementById("welcome").style.display = "inline-block";
                    }
                }
            }
        }

        //设置cookie
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays*24*60*60*1000));
            var expires = "expires="+d.toUTCString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }
        //获取cookie
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1);
                if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
            }
            return "";
        }
        //清除cookie
        function clearCookie(name) {
            setCookie(name, "", -1);
        }

        function getUrlParam(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }


        function submitData() {

            jQuery.ajax({
                async:false,
                type:"POST",
                dataType:"JSON",
                url:"/contentPost",
                data:{
                    "title":document.getElementById("title").value,
                    "content":document.getElementById("content").value,
                    "date":document.getElementById("date").innerHTML
                },
                success:function () {
                    alert("success");
                }
            });

//            var postData=new FormData();
//            postData.append("title",document.getElementById("inputTitle").value);
//            var req=new XMLHttpRequest();
//            req.open("POST", "/imageUpload", false);
//            req.send(postData);
//            req.onreadystatechange=function () {
//                console.log("title发送成功");
//            };


//            var formData=new FormData();
//            formData.append("title",document.getElementById("inputTitle").value);
//
//            for (var i = 0; i < files.length; i++){
//                console.log("文件数目："+files.length);
//                var file=files[i];
//                formData.append("myImage"+i,file);
//                console.log("file:"+file.name);
//            }
//
//            var xhr = new XMLHttpRequest();
//            xhr.onreadystatechange = function() {
//                if (xhr.readyState==4&&xhr.status==200){
//                    console.log(xhr.responseText);
//                    alert("成功");
//
//                }
//            };
//            xhr.open("POST", "/imageUpload", true);
//            console.log("formData:"+formData);
//            xhr.send(formData);


        }



        function readFile() {
            console.log("进入readfile");
            var input = document.getElementById("add");
            console.log(this.files.length);
            for (var i = 0; i < this.files.length; i++) {
                if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {　　//判断上传文件格式
                    return alert("上传的图片格式不正确，请重新选择");
                }
                console.log(files.push(this.files[i]));
                var reader = new FileReader();
                reader.readAsDataURL(this.files[i]);
                reader.onload = function (e) {
                    console.log("onload");
                    document.execCommand('insertImage', false, reader.result);
                }
            }
        }



        $(document).ready(function () {

            $(window).bind('beforeunload',function(){
                var logout=new XMLHttpRequest();
                logout.open("POST","http://localhost:8080/logout?username="+username,true);
                logout.send();
            });

//            $("#add").uploadify({
//                buttonClass:'btn',
//                height:50,
//                width:100,
//                buttonText:"添加图片",
//                method:'POST',
//                queueID: 'fileQueue',
//                multi:true,
//                auto:false,
//                swf:"js/uploadify.swf",
//                uploader:'/imageUpload',
//                uploadLimit:10,
//                removeTimeout:1,
//                fileSizeLimit:4000,
//                formData:{
//                    'index':1,
//                },
//                onInit:function(){
//                    $("div#"+$(this).attr("id")+"-button").removeClass("uploadify-button").addClass("btn btn-default glyphicon glyphicon-picture add");;
//                },
//                onUploadSuccess:function (file, data, response) {
//                    alert("上传成功");
//                },
//                onSelect: function(file)
//                {
//                    console.log(file);
//                    readFile(file);
//                }
//            });
            files=new Array();

            document.getElementById("addImage").onclick=function () {
                $("#add").trigger("click");
            }


            document.getElementById("add").addEventListener('change',readFile,false);

            $('#editControls a').click(function(e) {
                switch($(this).data('role')) {
                    case 'h1':
                    case 'h2':
                    case 'p':
                        document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
                        break;
                    default:
                        document.execCommand($(this).data('role'), false, null);
                        break;
                }
            });

            validateLogin();

        });




    </script>

</head>
<body>

<!--导航栏-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand self-padding-first-border"><img src="./img/TimberBlog.svg" width="150px" height="30px"></img></a>
    <button class="navbar-toggler" id="indexBtn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <!--            主页-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="index.html">
                    <i class="fa fa-home"></i>主页
                    <!--                    <span class="sr-only">(current)</span>-->
                </a>
            </li>
            <!--            分类-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="type.html">
                    <i class="fa fa-folder-open"></i>分类
                </a>
            </li>
            <!--标签-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="http://localhost:8088/demo/label.html">
                    <i class="fa fa-bookmark"></i>标签
                </a>
            </li>

            <!--            时间轴-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="timetable.html">
                    <i class="fa fa-calendar"></i>时间轴
                </a>
            </li>
        </ul>
        <!--        搜索按钮-->
        <form class="form-inline my-2 my-lg-0  self-padding-search-border">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="selfInf.html">
                    <i class="fa fa-user"></i>个人中心
                </a>
            </li>
            <!--编写文章-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="editor.html">
                    <i class="fa fa-keyboard-o"></i>文章编辑
                </a>
            </li>
        </ul>
    </div>
</nav>


<div id="main">
    <form id="form">
<div class="contents">
    <div class="container-fluid">

        <input type="text" class="info_input"  id="inputTitle" placeholder="标题" name="title">
        <hr>
        <hr>
        <div id='pad-wrapper'>
            <div id="editparent">
                <div id='editControls' class='span12' style='text-align:center; padding:5px;'>
                    <div class='btn-group'>
                        <a class='btn' data-role='undo' href='#'><i class='fa fa-undo'></i></a>
                        <a class='btn' data-role='redo' href='#'><i class='fa fa-repeat'></i></a>
                    </div>
                    <div class='btn-group'>
                        <a class='btn' data-role='bold' href='#'><b>Bold</b></a>
                        <a class='btn' data-role='italic' href='#'><em>Italic</em></a>
                        <a class='btn' data-role='underline' href='#'><u><b>U</b></u></a>
                        <a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a>
                    </div>
                    <div>
                        <a id="addImage" class='btn'><i class='fa fa-file-image-o'></i></a>
                    </div>
                    <div class='btn-group'>
                        <a class='btn' data-role='justifyLeft' href='#'><i class='fa fa-align-left'></i></a>
                        <a class='btn' data-role='justifyCenter' href='#'><i class='fa fa-align-center'></i></a>
                        <a class='btn' data-role='justifyRight' href='#'><i class='fa fa-align-right'></i></a>
                        <a class='btn' data-role='justifyFull' href='#'><i class='fa fa-align-justify'></i></a>
                    </div>
                    <div class='btn-group'>
                        <a class='btn' data-role='indent' href='#'><i class='fa fa-indent'></i></a>
                        <a class='btn' data-role='outdent' href='#'><i class='fa fa-outdent'></i></a>
                    </div>
                    <div class='btn-group'>
                        <a class='btn' data-role='insertUnorderedList' href='#'><i class='fa fa-list-ul'></i></a>
                        <a class='btn' data-role='insertOrderedList' href='#'><i class='fa fa-list-ol'></i></a>
                    </div>
                    <div class='btn-group'>
                        <a class='btn' data-role='h1' href='#'>h<sup>1</sup></a>
                        <a class='btn' data-role='h2' href='#'>h<sup>2</sup></a>
                        <a class='btn' data-role='p' href='#'>p</a>
                    </div>
                    <div class='btn-group'>
                        <a class='btn' data-role='subscript' href='#'><i class='fa fa-subscript'></i></a>
                        <a class='btn' data-role='superscript' href='#'><i class='fa fa-superscript'></i></a>
                    </div>
                </div>

            </div>
            <div id="editor" name="content" class='editor'  style='' contenteditable="true"></div>

                <textarea  id="content" name="content" placeholder="上面的模拟文本框可以使用编辑组件，但是不能取数据，这个真实文本框不能使用编辑组件，但是能取数据" class='editor' style='' ></textarea>

            </div>
        </div>
    </div>
</div>
<hr>
<div>
    <input name="myImage" multiple type="file" id="add" style="display: none"/>
</div>
        <div class="form-group row">
            <label class="col-form-label col-2 text-center">请选择提交日期：</label>
            <div class="col-8">
                <input type="date" id="date" name="date"  class="form-control">
            </div>
        </div>

<div class="form-group row">
    <label class="col-form-label col-2"></label>
    <div class="col-8">
        <button type="button" id="btnReg" class="sub_btn">保存</button>
    </div>
</div>

</form>
</div>
</body>

<script>
    jQuery(function () {
        jQuery("#btnReg").click(function () {
            //获取页面中控件的数据
            //1.必须在<form></form>之间
            //2.必须有name属性

             let form=jQuery("#form").serialize();
            //向服务器发请求，并获取响应结果
            //rst表示服务器返回的数据
            jQuery.post("user/written",form,function (rst) {
                alert(rst);
            });
        });
    })
</script>


</html>